<!--
渐变色
createLinearGradient()

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var cxt=canvas.getContext('2d');

        var clg=cxt.createLinearGradient(0,0,0,canvas.height);
        clg.addColorStop(0,'blue');
        clg.addColorStop(0.25,'white');
        clg.addColorStop(0.5,'purple');
        clg.addColorStop(0.75,'red');
        clg.addColorStop(1,'yellow')
        cxt.fillStyle=clg;
        cxt.fillRect(0,0,200, 200);

        var crg=cxt.createRadialGradient(200,0,100,250,300,50);
        crg.addColorStop(0,'blue');
        crg.addColorStop(0.25,'white');
        crg.addColorStop(0.5,'purple');
        crg.addColorStop(0.75,'red');
        crg.addColorStop(1,'yellow')
        cxt.fillStyle=crg;
        cxt.fillRect(200,0,200, 200);
    </script>
</body>
</html>